<template>
    <div>
        <div class="container">
            <div class="container__top">
                <div class="container__top__back">
                    <span @click="handleBack()" class="iconfont">&#xe679;</span>
                </div>
                <div class="container__top__info">
                    <span>确认订单</span>
                </div>
            </div>
            <div class="container__address"></div>
            <div class="container__productInfo">
                <div class="product">
                    <template v-for="item in productList">
                        <div class="item" v-if="(typeof item) !== 'number'">
                            <div style="margin-right: 16px">
                                <img class="item__img" :src="item.imgUrl" alt="" />
                            </div>
                            <div style="flex: 1" class="item__right">
                                <span class="item__title">{{ item.name }}</span>
                                <div style="height: 8px"></div>
                                <span class="item__price">¥{{ item.price }} × {{ item.count }} </span>
                                <!-- <span class="item__oldPrice">¥{{ item.oldPrice }}</span> -->
                                <div class="item__plusBox">
                                    <span style="flex: 1; text-align: center;font-size: 14px;">
                                        ¥{{ (item.price * item.count).toFixed(2) }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </template>
                </div>
            </div>
            <div class="container__bottom">
                <div class="container__bottom__info">实付金额: ¥{{ caculations.price }}</div>
                <div class="container__bottom__button" @click="diaglogVisible = true">提交订单</div>
            </div>
        </div>

        <div class="dialog" @click="diaglogVisible = false" v-if="diaglogVisible"> 
            <!-- 阻止事件冒泡 -->
            <div class="dialog__info" @click.stop="">
                <div class="dialog__info__text1" >确认要离开收银台？</div>
                <div class="dialog__info__text2" >请尽快完成支付，否则将被取消</div>
                <div class="dialog__info__text3">
                    <div class="dialog__info__quxiao" @click="testClick1">取消订单</div>
                    <div class="dialog__info__queding" @click="testClick2">确认支付</div>
                </div>
            </div>
        </div>
        <div class="dialog" @click="testClick3" v-if="successDiaglogVisible"> 
            <!-- 阻止事件冒泡 -->
            <div class="dialog__info" @click.stop="">
                <div class="iconfont dialog__info__icon">&#xe65a;</div>
                <div class="dialog__info__success">支付成功，等待配送</div>
            </div>
        </div>
        <div class="dialog" @click="failDiaglogVisible = false" v-if="failDiaglogVisible"> 
            <!-- 阻止事件冒泡 -->
            <div class="dialog__info" @click.stop="">
                <div class="dialog__info__success" style="line-height:150px ;">您已取消支付</div>
            </div>
        </div>
    </div>
</template>

<script>
import { useRouter, useRoute } from "vue-router";
import { useCommomCartEffect } from '../../effect/useCartEffect.js'
import { ref } from "vue";
import { useStore } from "vuex";

const useRouterEffect = () => {
    const router = useRouter();
    const handleBack = () => {
        router.back();
    };
    return handleBack;
};
const useCartEffect = (shopId) => {
    const store = useStore();
    const { productList, cartList, caculations } = useCommomCartEffect(shopId);// 获取当前商店下 已选择商品的列表
    const clearCarData = (shopId)=>{
        store.commit('clearCarData',{shopId});
    }
    return { productList, cartList, caculations,clearCarData };
}


export default {
    setup() {
        let diaglogVisible = ref(false);
        let successDiaglogVisible = ref(false);
        let failDiaglogVisible = ref(false);
        const route = useRoute();
        
        const shopId = route.params.id;
        const handleBack = useRouterEffect();
        const { productList, cartList, caculations,clearCarData } = useCartEffect(shopId);
        const testClick1 = ()=>{
            diaglogVisible.value = false;
            failDiaglogVisible.value = true;
        }
        const testClick2 = ()=>{
            diaglogVisible.value = false;
            successDiaglogVisible.value =true;
        }
        const testClick3 = ()=>{
            clearCarData(shopId);// 清理localStorage里的数据
            handleBack();// 路由回退到上级
            successDiaglogVisible.value =false;
            
        }
        return { handleBack, productList, cartList, caculations,diaglogVisible,testClick1,testClick2,testClick3,successDiaglogVisible,failDiaglogVisible };
    },
};
</script>

<style lang="scss" scoped>
.container {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    background-color: #f8f8f8;
    &__top {
        color: #fff;
        height: 159px; // 196
        margin-bottom: 60px;
        background-image: linear-gradient(0deg, rgba(0, 145, 255, 0) 4%, #0091ff 50%);
        padding-top: 41px;
        box-sizing: border-box;
        &__back {
            font-size: 22px;
            position: absolute;
            left: 20px;
            top: 35px;
            span {
                font-size: 22px;
            }
        }
        &__info {
            text-align: center;
            font-size: 16px;
        }
    }
    &__address {
        width: 330px;
        height: 111px;
        background-color: #fff;
        border-radius: 4px;
        position: absolute;
        top: 85px;
        left: 50%;
        transform: translateX(-50%);
        margin-bottom: 10px;
    }

    &__productInfo {
        width: 330px;
        margin: 0 auto;
        // height: 10px;
        background-color: #fff;
        padding: 10px;
        box-sizing: border-box;

        .product {
            bottom: 0px;
            left: 0px;
            right: 0px;
            img {
                width: 46px;
                height: 46px;
            }
            .item {
                margin-top: 10px;
                display: flex;
                &__img {
                    margin-left: 15px;
                }
                img {
                    width: 56px;
                    height: 56px;
                }
                &__plusBox {
                    width: 60px;
                    float: right;
                    margin-right: 10px;
                    display: flex;
                }
                &__right {
                    border-bottom: 1px solid #f1f1f1;
                    padding-bottom: 12px;
                }
                &__title {
                    font-size: 14px;
                    font-weight: bold;
                    color: #333;
                    line-height: 22px;
                }
                &__desc1 {
                    font-size: 13px;
                    color: #333;
                    line-height: 18px;
                    margin-right: 16px;
                }
                &__price {
                    color: #e93b3b;
                }
                &__oldPrice {
                    color: #999;
                    font-size: 10px;
                    text-decoration: line-through;
                }
                &__icon {
                    color: #0091ff;
                    font-size: 19px;
                    flex: 1;
                }
                &__discountinfo {
                    color: #e93b3b;
                    font-size: 13px;
                    line-height: 18px;
                }
            }
        }
    }

    &__bottom {
        position: fixed;
        left: 0px;
        bottom: 0px;
        background-color: #fff;
        height: 49px;
        width: 100%;
        display: flex;
        &__info {
            flex: 1;
            line-height: 49px;
            margin-left: 10px;
            font-size: 16px;
            color: #333333;
        }
        &__button {
            background: #4fb0f9;
            height: 49px;
            width: 98px;
            flex: 0.5;
            line-height: 49px;
            text-align: center;
            color: #fff;
        }
    }
}
.dialog{
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgba(0,0,0,0.50);
    &__info{
        position: absolute;
        left: 50%;
        top:50%;
        transform: translateX(-50%) translateY(-50%);
        border-radius: 4px;
        width: 300px;
        height: 157px;
        background-color: #FFFFFF ;
        text-align: center;
        &__text1{
            font-size: 18px;
            color: #333333;     
            margin: 24px 60px 8px 60px;
            font-weight: bold;
        }
        &__text2{
            font-size: 14px;
            color: #666666;
            margin-bottom: 20px;
        }
        &__text3{
            margin: 0 auto;
            width: 200px;
            display: flex;
            div{
                flex: 1;
                width: 56px;
                height: 32px;
                border-radius: 16px;
                line-height: 32px;
                font-size: 14px;
            }
        }
        &__quxiao{
            color: #0091FF;
            border: 1px solid #4FB0F9;
            margin-right: 24px;
        }
        &__queding{
            color: #fff;
            background-color: #4FB0F9;
        }
        &__icon{
font-size: 100px;
font-weight: 100;
        }
        &__success{
font-size: 18px;color: #333333;font-weight: bold;
        }
    }
}
</style>
